<template>
  <div class="displayArea">
    <!-- <table>
      <tr>
        <th class="el-icon-rank" @click="showSelectArea"></th>
        <th>
          <input type="checkbox" :checked="AllCheckedOrder" @click="handleAll($event)" />
        </th>
        <th class="el-icon-d-caret" data-sortflag="0" @click="handleSort($event)" v-for="orderTitle in orderTitles"
          :key="orderTitle.name">
          {{ orderTitle.name }}
        </th>
      </tr>
      <tr v-show="selectAreaVisible">
        <td>筛选</td>
        <td />sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
        <td v-for="(orderTitle, index) in orderTitles" :key="orderTitle.name">
          <el-input placeholder="支持批量搜索" size="mini" v-if="orderTitle.sortMethod === 1" v-model="selectedList[index]"
            @input="handleSearch(orderTitle.title, index)" />
          <el-select filterable placeholder="请选择" size="mini" v-if="orderTitle.sortMethod === 2"
            v-model="selectedList[index]" @change="handleSearch(orderTitle.title, index)">
            <el-option v-for="item in orderTitle.options" :key="item" :label="item" :value="item" />
          </el-select>
          <el-date-picker v-model="selectedList[index]" @change="handleSearch(orderTitle.title, index)" type="daterange"
            align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            :picker-options="pickerOptions" style="width: 180px" size="mini" v-if="orderTitle.sortMethod === 3" />
        </td>
      </tr>
      <tr v-for="(line, index) in orderlist" :key="index" ref="ordersNode"
        @click="detailOrder($event, line.order_code)">
        <td>{{ index + 1 }}</td>
        <td>
          <input type="checkbox" :name="line.order_code" :value="line.order_id" @click="Radioevents(line.order_code)"
            :checked="line.isCheck" />
        </td>
        <td v-for="(val, key, index) in line" :key="index" :id="key">
          {{ val }}
        </td>
      </tr>
    </table> -->
    <el-table
    ref="multipleTable"
    :data="orderlist"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      label="序号"
      type="index"
      width="55"
      fixed="left">
    </el-table-column>
    <el-table-column
      type="selection"
      width="70"
      fixed="left">
    </el-table-column>
    <el-table-column
      prop="order_no"
      label="运单号"
      width="200"
      fixed="left">
    </el-table-column>
    <el-table-column
      prop="sender_name"
      label="发货人"
      width="120">
    </el-table-column>
    <el-table-column
      prop="sender_phone"
      label="发货人电话"
      width="150">
    </el-table-column>
    <el-table-column
      prop="sender_company"
      label="发货公司"
      width="220">
    </el-table-column>
    <el-table-column
      prop="sender_address"
      label="发货地址"
      width="260">
    </el-table-column>
    <el-table-column
      prop="sender_remark"
      label="发货人备注"
      width="280">
    </el-table-column>
    <el-table-column
      prop="router"
      label="路由"
      width="230">
    </el-table-column>
    <el-table-column
      prop="From_network_name"
      label="始发网点"
      show-overflow-tooltip
      width="120">
    </el-table-column>
    <el-table-column
      prop="to_network_name"
      label="目的网点"
      show-overflow-tooltip
      width="120">
    </el-table-column>
    <el-table-column
      prop="from_region_name"
      label="始发站"
      show-overflow-tooltip
      width="120">
    </el-table-column>
    <el-table-column
      prop="to_region_name"
      label="到站"
      show-overflow-tooltip
      width="120">
    </el-table-column>
    <el-table-column
      prop="receiver_name"
      label="收货人"
      width="120">
    </el-table-column>
    <el-table-column
      prop="receiver_phone"
      label="收货人电话"
      width="150">
    </el-table-column>
    <el-table-column
      prop="receiver_company"
      label="收货公司"
      width="220">
    </el-table-column>
    <el-table-column
      prop="receiver_address"
      label="收货地址"
      width="260">
    </el-table-column>
    <el-table-column
      prop="receiver_remark"
      label="收货人备注"
      width="280">
    </el-table-column>
  </el-table>
  </div>
</template>
<script>
import _ from "lodash";
import { reqSearchOrders } from "@/api/orderForm";
import { getToken } from "@/utils/auth";
export default {
  props: ["msg", "msgList", "selectedOrders", "displayOrders"],
  data() {
    return {
      AllCheckedOrder: false,
      selectAreaVisible: true, //这个是筛选那一行
      orderTitles: [],
      orderlist: [],
      selectedList: [], //刷选区域的数据
      pickerOptions: {
        // 时间选择器的快选项
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      orderlistTure: false,
      orderlistLength:0,
    };
  },
  watch: {
    msg: function () {
      this.orderTitles = this.msg;
    },
    msgList: function () {
      // 当数据为空的时候table表格不展示
      if (this.msgList.length > 0) {
        this.orderlistTure = true;
        this.orderlist = this.msgList;
      }
    },
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.orderlistLength = val.length
      this.$emit('OrderlistLengthFn',this.orderlistLength)
    },



    // 订单编号添加状态 
    document() {

      // 删除isCheck 的dom
      if (document.getElementById("isCheck")) {
        document.getElementById("isCheck").remove();

      }
      //   if (document.getElementById("order_code")) {
      //  .style.color = "blue"
      //   }
    },
    nameTime() {
      this.orderTitles = this.msg;
      this.orderlist = this.msgList;

    },
    showSelectArea() {
      this.selectAreaVisible = !this.selectAreaVisible;
    },
    handleSort(event) {
      //控制显示排序的icon图标
      // sortflag = 0; //0表示初始状态,1表示向上排序,2表示向下排序
      let sortflag = event.target.dataset.sortflag; //dataset创造了一个各个标签自有的存储数据的容器,不同标签内部的数据互不影响
      if (sortflag == 0) {
        event.target.dataset.sortflag = 1;
        event.target.className = "el-icon-caret-top";
      } else if (sortflag == 1) {
        event.target.dataset.sortflag = 2;
        event.target.className = "el-icon-caret-bottom";
      } else {
        event.target.dataset.sortflag = 0;
        event.target.className = "el-icon-d-caret";
      }
    },
    // 单选
    Radioevents(order_code) {
      this.AllCheckedOrder = false;
      let count = 0;
      var timename = [];
      let selectedList = [];
      for (var i = 0; i < this.orderlist.length; i++) {
        if (this.orderlist[i].order_code == order_code) {
          if (this.orderlist[i].isCheck == false) {
            this.orderlist[i].isCheck = true;
            this.$store.commit("ORDER_CODE", { data: order_code });
          } else {
            this.orderlist[i].isCheck = false;
          }
        }
        if (this.orderlist[i].isCheck == true) {
          count++;
          selectedList.push(this.orderlist[i].order_code);
          this.selectedOrders(selectedList);
          if (count === this.orderlist.length) {
            this.AllCheckedOrder = true;
          }
        }
        this.$store.commit("COUNT_ORDER", count);
        timename.push(this.orderlist[i]);
      }
      this.orderlist = timename;
    },
    // 多选
    handleAll(event) {
      var timename = [];
      let nums = [];
      if (this.AllCheckedOrder == false) {
        this.AllCheckedOrder = true;
        this.$store.commit("COUNT_ORDER", 3);
        var timename = []
        for (var i = 0; i < this.orderlist.length; i++) {
          this.orderlist[i].isCheck = true;
          timename.push(this.orderlist[i]);
          nums.push(this.orderlist[i].order_code)
          this.selectedOrders(nums)
        }
      } else {
        this.AllCheckedOrder = false;
        this.$store.commit("COUNT_ORDER", 0);
        for (var i = 0; i < this.orderlist.length; i++) {
          this.orderlist[i].isCheck = false;
          timename.push(this.orderlist[i]);
        }
      }
      this.orderlist = timename;
    },
    detailOrder(e, order_code) {

      if (e.target.id === "order_code") {
        this.$store.commit("ADD_Order", { data: true, type: "onlyread" });
        this.$store.commit("ORDER_CODE", { data: order_code });
        this.orderInDetail = this.orderlist.find(
          (item) => item.order_code == e.target.innerText
        );
      }
    },
    handleSearch: _.debounce(async function (title, index) {
      if (this.selectedList[0] !== "") {
        var token = getToken("Cookie")
        let result = await reqSearchOrders(this.selectedList[index], title,token);
        this.orderlist = result.data.list;
      } else {
        this.displayOrders();
      }
    }, 500),
  },
  mounted() {
  },
  created() {
    this.nameTime();
  },
  updated() {

    for (var i = 0; i < this.orderlist.length; i++) {
      this.document();

    }
  },
};
</script>
<style lang="less" scoped>
.displayArea {
  background-color: #fff;
  overflow: auto; //显示自带的滚动条
  white-space: nowrap;
  height: 100%;

  table {
    font-size: 12px;
    border: 1px solid #cccccc;
    border-collapse: collapse;

    //排第一二三的元素加定位,然后给排第四的元素加左外边距
    th:nth-child(1),
    td:nth-child(1) {
      width: 40px;
      text-align: center;
      background-color: inherit; //继承背景颜色
      vertical-align: inherit; //设置元素的基线对齐方式
      position: absolute;
      z-index: 1;
    }

    th:nth-child(2),
    td:nth-child(2) {
      width: 40px;
      text-align: center;
      background-color: inherit;
      vertical-align: inherit;
      position: absolute;
      left: 43px;
      z-index: 1;
    }

    th:nth-child(3) {
      width: 150px;
      background-color: inherit;
      vertical-align: inherit;
      position: absolute;
      left: 86px;
      z-index: 1;

    }

    td:nth-child(3) {
      width: 150px;
      background-color: inherit;
      vertical-align: inherit;
      position: absolute;
      left: 86px;
      z-index: 1;
      cursor:pointer;
      color: #409eff;
    }

    th:nth-child(4),
    td:nth-child(4) {
      margin-left: 238px;
    }

    tr {
      background-color: #fff;

      &:nth-child(even) {
        background: #e9e9e9;
      }

      th,
      td {
        border: 1px solid #cccccc;
        display: inline-block;
        width: 183px;
        height: 31px;
        line-height: 31px;
      }

      &:nth-child(2) {
        background-color: #fff !important;
      }
    }
  }
}
</style>
